<template>
  <div class="render-bottom">
    <a-row>
      <a-col :span="4">
        <a-select style="width: 75%" size="large" v-model="factor">
          <a-select-option  v-for="item in SCALES_OPTIONS" :value="item" :key="item">
            {{ item }} 
          </a-select-option>
        </a-select>
      </a-col>
      <a-col style="display: flex; align-items: center" :span="8">
        <a-icon @click="factor > 5 ? factor-=5 : factor" type="minus" />
        <a-slider
          style="flex: 1;"
          v-model="factor"
          :step="5"
          :min="5"
          :max="300"
          :tip-formatter="(v) => `${v}%`"
        />
        <a-icon @click="factor < 300 ? factor+=5 : factor" type="plus" />
      </a-col>
    </a-row>
  </div>
</template>

<script>
const SCALES_OPTIONS = [
  25, 50, 75, 100
];

import render from '@/mixins/renderer';

export default {
  name: 'RenderBottom',
  mixins: [
    render
  ],
  components: {},
  data() {
    return {
      SCALES_OPTIONS,
      factor: 100,
    }
  },
  watch: {
    factor() {
      this.handleScale(this.factor / 100)
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/styles/vars.less';
@import '~@/styles/cover.less';

/deep/ .ant-select-selection-selected-value::after {
    content:"%"
}

.render-bottom {
  background-color: @dark-color-2;
  padding: 16px 24px;
  .ant_select_reset();
  .ant_slider_reset();
}
</style>
